<template>
    <div>
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">设置密码</span>
        <span slot="more"></span>
        </LoginHeader>
         <div class="edit">
            <i class="el-icon-lock"></i>
            <input type="password" placeholder="设置你的密码" v-model="pas" >
        </div>
         <div class="edit">
            <i class="el-icon-lock"></i>
            <input type="password" placeholder="再次输入你的密码" v-model="confipas">
        </div>
        <div class="btn">
            <el-button type="primary" :disabled="next" @click="submitpas">确定</el-button>
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            next:true,
            pas:'',
            confipas:''
        }
    },
    mounted(){
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        submitpas(){
            let time=new Date()
            let create=time.getTime()
            this.$http.post('/api/users/register',
            {username:this.$store.state.phonenum,
            password:this.confipas,
            createtime:create
            }).then(({
                data,config
            })=>{
                if(data.code==200){
                    this.$message.success('注册用户成功')
                    this.$router.push('/login')
                }else{
                    this.$message.error('注册用户失败')
                }
            })
        }
    },
    watch:{
        pas:function(){
            if(this.pas.trim()!==''&&this.pas==this.confipas){
                this.next=false
            }else{
                this.next=true
            }
        },
        confipas:function(){
            if(this.confipas.trim()!==''&&this.pas==this.confipas){
                this.next=false
            }else{
                this.next=true
            }
        }
    },
 components:{
        LoginHeader
    },
}
</script>
<style lang="less" scoped>
.edit{
    // background-color: #f7f7f8;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid #f8f8f8;
    margin: 100px 0 20px;
    padding: 20px 0;
    i{
        margin: 15px 50px;
    }
    input{
        border: none;
        outline: none;
    }
}
.btn{
    text-align: center;
    margin-top: 50px;
    .el-button{
    width: 50%;
    border-radius: 40px;
    padding: 15px;
}
}
</style>